<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能推荐</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <style>
        .recommendation-header {
            background: linear-gradient(135deg, #FF9800, #F57C00);
            color: white;
            padding: 20px 16px;
            text-align: center;
            border-radius: 0 0 16px 16px;
        }
        .recommendation-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 8px;
        }
        .recommendation-subtitle {
            opacity: 0.9;
            font-size: 14px;
        }
        .tabs {
            display: flex;
            background-color: white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-top: 16px;
            border-radius: 12px;
            overflow: hidden;
        }
        .tab {
            flex: 1;
            text-align: center;
            padding: 12px 0;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 14px;
        }
        .tab.active {
            background-color: #FF9800;
            color: white;
            font-weight: bold;
        }
        .recommendation-card {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            margin-top: 16px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .recommendation-image {
            height: 180px;
            overflow: hidden;
            position: relative;
        }
        .recommendation-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .recommendation-overlay {
            position: absolute;
            top: 12px;
            right: 12px;
            background-color: rgba(255, 152, 0, 0.9);
            color: white;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
        }
        .recommendation-content {
            padding: 16px;
        }
        .recommendation-name {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 8px;
        }
        .recommendation-details {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            color: #666;
            font-size: 14px;
        }
        .recommendation-details i {
            margin-right: 6px;
            color: #FF9800;
        }
        .recommendation-details .dot {
            margin: 0 8px;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background-color: #ccc;
        }
        .recommendation-description {
            color: #555;
            font-size: 14px;
            line-height: 1.5;
            margin-bottom: 16px;
        }
        .recommendation-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 16px;
        }
        .recommendation-tag {
            background-color: #FFF3E0;
            color: #E65100;
            padding: 4px 10px;
            border-radius: 16px;
            font-size: 12px;
        }
        .recommendation-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #eee;
            padding-top: 12px;
            margin-top: 8px;
        }
        .recommendation-price {
            font-weight: bold;
            color: #F57C00;
        }
        .recommendation-price small {
            font-size: 12px;
            color: #999;
            font-weight: normal;
        }
        .recommendation-button {
            background-color: #FF9800;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 20px;
            font-weight: bold;
            font-size: 14px;
        }
        .itinerary-section {
            margin-top: 24px;
        }
        .section-title {
            font-weight: bold;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .section-title-text {
            display: flex;
            align-items: center;
        }
        .section-title-text i {
            margin-right: 8px;
            color: #FF9800;
        }
        .section-more {
            color: #FF9800;
            font-size: 14px;
            font-weight: normal;
        }
        .itinerary-card {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 16px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .itinerary-header {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 1px solid #eee;
        }
        .itinerary-day {
            width: 36px;
            height: 36px;
            border-radius: 18px;
            background-color: #FFF3E0;
            color: #F57C00;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 12px;
        }
        .itinerary-title {
            font-weight: bold;
        }
        .itinerary-content {
            padding: 16px;
        }
        .timeline {
            position: relative;
            padding-left: 30px;
        }
        .timeline::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 10px;
            width: 2px;
            background-color: #ddd;
        }
        .timeline-item {
            position: relative;
            padding-bottom: 20px;
        }
        .timeline-item:last-child {
            padding-bottom: 0;
        }
        .timeline-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: -30px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #FF9800;
            border: 3px solid white;
            box-shadow: 0 0 0 1px #ddd;
        }
        .timeline-time {
            font-weight: bold;
            margin-bottom: 4px;
        }
        .timeline-content {
            background-color: #f8f8f8;
            padding: 12px;
            border-radius: 8px;
        }
        .timeline-location {
            font-weight: bold;
            margin-bottom: 4px;
        }
        .timeline-desc {
            font-size: 13px;
            color: #666;
        }
        .featured-section {
            margin-top: 24px;
        }
        .featured-scroll {
            display: flex;
            overflow-x: auto;
            gap: 16px;
            padding: 4px 0;
            -webkit-overflow-scrolling: touch;
        }
        .featured-item {
            min-width: 250px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            background-color: white;
        }
        .featured-image {
            height: 150px;
            overflow: hidden;
        }
        .featured-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .featured-info {
            padding: 12px;
        }
        .featured-name {
            font-weight: bold;
            margin-bottom: 4px;
        }
        .featured-price {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .featured-cost {
            color: #F57C00;
            font-weight: bold;
        }
        .featured-rating {
            display: flex;
            align-items: center;
            color: #666;
            font-size: 13px;
        }
        .featured-rating i {
            color: #FFC107;
            margin-right: 4px;
        }
        .preference-section {
            margin-top: 24px;
            background-color: white;
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .preference-title {
            font-weight: bold;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
        }
        .preference-title i {
            margin-right: 8px;
            color: #FF9800;
        }
        .preference-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 16px;
        }
        .preference-tag {
            background-color: #f0f0f0;
            color: #666;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 14px;
            display: flex;
            align-items: center;
        }
        .preference-tag.active {
            background-color: #FFF3E0;
            color: #E65100;
        }
        .preference-tag i {
            margin-right: 6px;
        }
        .refresh-button {
            background-color: #FF9800;
            color: white;
            border: none;
            padding: 10px;
            width: 100%;
            border-radius: 24px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .refresh-button i {
            margin-right: 8px;
        }
    </style>
</head>
<body>
    <div class="app-header" style="background-color: #F57C00;">
        <div class="header-title">智能推荐</div>
        <div class="header-actions">
            <i class="fas fa-history"></i>
        </div>
    </div>

    <div class="recommendation-header">
        <div class="recommendation-title">个性化推荐</div>
        <div class="recommendation-subtitle">基于您的偏好和兴趣定制</div>
    </div>

    <div class="app-content">
        <div class="tabs">
            <div class="tab active">景点</div>
            <div class="tab">美食</div>
            <div class="tab">购物</div>
            <div class="tab">体验</div>
        </div>

        <div class="recommendation-card">
            <div class="recommendation-image">
                <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400'%3E%3Crect width='800' height='400' fill='%234CAF50'/%3E%3Cpath d='M0,350 L800,350 L800,400 L0,400 Z' fill='%23795548'/%3E%3Cpath d='M100,350 L250,150 L400,350 L550,200 L700,350 Z' fill='%23388E3C'/%3E%3C/svg%3E" alt="天门山">
                <div class="recommendation-overlay">推荐指数: 98%</div>
            </div>
            <div class="recommendation-content">
                <div class="recommendation-name">天门山国家森林公园</div>
                <div class="recommendation-details">
                    <i class="fas fa-map-marker-alt"></i>
                    <span>张家界市永定区</span>
                    <div class="dot"></div>
                    <span>距离您 12.5 公里</span>
                </div>
                <div class="recommendation-description">
                    天门山是张家界的标志性景点，以通天大道、天门洞和玻璃栈道闻名于世。您喜欢的自然景观和惊险体验在这里都能得到满足。
                </div>
                <div class="recommendation-tags">
                    <div class="recommendation-tag">自然风光</div>
                    <div class="recommendation-tag">惊险体验</div>
                    <div class="recommendation-tag">热门打卡</div>
                    <div class="recommendation-tag">适合拍照</div>
                </div>
                <div class="recommendation-actions">
                    <div class="recommendation-price">
                        ¥258 <small>起/人</small>
                    </div>
                    <button class="recommendation-button">立即预订</button>
                </div>
            </div>
        </div>

        <div class="itinerary-section">
            <div class="section-title">
                <div class="section-title-text">
                    <i class="fas fa-route"></i>
                    <span>定制一日游</span>
                </div>
                <div class="section-more">更多行程 <i class="fas fa-chevron-right"></i></div>
            </div>
            
            <div class="itinerary-card">
                <div class="itinerary-header">
                    <div class="itinerary-day">1</div>
                    <div class="itinerary-title">张家界精华一日游</div>
                </div>
                <div class="itinerary-content">
                    <div class="timeline">
                        <div class="timeline-item">
                            <div class="timeline-time">09:00 - 11:30</div>
                            <div class="timeline-content">
                                <div class="timeline-location">天门山</div>
                                <div class="timeline-desc">乘坐世界最长的高山客运索道，参观天门洞，体验玻璃栈道</div>
                            </div>
                        </div>
                        <div class="timeline-item">
                            <div class="timeline-time">12:00 - 13:30</div>
                            <div class="timeline-content">
                                <div class="timeline-location">土家风味餐</div>
                                <div class="timeline-desc">品尝地道土家菜，特色腊肉、三下锅及各种山野菜</div>
                            </div>
                        </div>
                        <div class="timeline-item">
                            <div class="timeline-time">14:00 - 16:30</div>
                            <div class="timeline-content">
                                <div class="timeline-location">金鞭溪</div>
                                <div class="timeline-desc">漫步溪流，欣赏峰林景观，与溪儿精灵互动</div>
                            </div>
                        </div>
                        <div class="timeline-item">
                            <div class="timeline-time">17:00 - 18:30</div>
                            <div class="timeline-content">
                                <div class="timeline-location">非遗文化表演</div>
                                <div class="timeline-desc">欣赏土家族仗鼓舞，体验当地民族文化</div>
                            </div>
                        </div>
                    </div>
                    <button class="btn btn-primary w-full" style="margin-top: 16px; background-color: #FF9800;">预订这个行程</button>
                </div>
            </div>
        </div>

        <div class="featured-section">
            <div class="section-title">
                <div class="section-title-text">
                    <i class="fas fa-utensils"></i>
                    <span>美食推荐</span>
                </div>
                <div class="section-more">全部 <i class="fas fa-chevron-right"></i></div>
            </div>
            
            <div class="featured-scroll">
                <div class="featured-item">
                    <div class="featured-image">
                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23FFCC80'/%3E%3Ccircle cx='200' cy='150' r='100' fill='%23E65100'/%3E%3Ccircle cx='200' cy='150' r='60' fill='%23FFCC80'/%3E%3Ccircle cx='200' cy='150' r='30' fill='%23E65100'/%3E%3C/svg%3E" alt="土家三下锅">
                    </div>
                    <div class="featured-info">
                        <div class="featured-name">老字号土家三下锅</div>
                        <div class="featured-price">
                            <div class="featured-cost">¥98/人</div>
                            <div class="featured-rating">
                                <i class="fas fa-star"></i>
                                <span>4.8 (328)</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="featured-item">
                    <div class="featured-image">
                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23A5D6A7'/%3E%3Cpath d='M100,200 L300,200 L300,250 L100,250 Z' fill='%23004D40'/%3E%3Cpath d='M150,150 L250,150 L250,200 L150,200 Z' fill='%23004D40'/%3E%3Cpath d='M180,100 L220,100 L220,150 L180,150 Z' fill='%23004D40'/%3E%3C/svg%3E" alt="野山菌">
                    </div>
                    <div class="featured-info">
                        <div class="featured-name">山林野菌火锅</div>
                        <div class="featured-price">
                            <div class="featured-cost">¥128/人</div>
                            <div class="featured-rating">
                                <i class="fas fa-star"></i>
                                <span>4.6 (215)</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="featured-item">
                    <div class="featured-image">
                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23FFECB3'/%3E%3Cpath d='M150,100 L250,100 L250,250 L150,250 Z' fill='%23FFC107'/%3E%3Cpath d='M120,150 L280,150 L280,200 L120,200 Z' fill='%23FFA000'/%3E%3C/svg%3E" alt="糍粑">
                    </div>
                    <div class="featured-info">
                        <div class="featured-name">传统手工糍粑坊</div>
                        <div class="featured-price">
                            <div class="featured-cost">¥15/份</div>
                            <div class="featured-rating">
                                <i class="fas fa-star"></i>
                                <span>4.9 (512)</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="preference-section">
            <div class="preference-title">
                <i class="fas fa-sliders-h"></i>
                <span>调整您的偏好</span>
            </div>
            <div class="preference-tags">
                <div class="preference-tag active">
                    <i class="fas fa-mountain"></i>
                    <span>自然风光</span>
                </div>
                <div class="preference-tag active">
                    <i class="fas fa-camera"></i>
                    <span>摄影胜地</span>
                </div>
                <div class="preference-tag">
                    <i class="fas fa-hiking"></i>
                    <span>户外活动</span>
                </div>
                <div class="preference-tag active">
                    <i class="fas fa-utensils"></i>
                    <span>美食体验</span>
                </div>
                <div class="preference-tag">
                    <i class="fas fa-landmark"></i>
                    <span>历史文化</span>
                </div>
                <div class="preference-tag">
                    <i class="fas fa-child"></i>
                    <span>亲子活动</span>
                </div>
                <div class="preference-tag">
                    <i class="fas fa-shopping-bag"></i>
                    <span>特色购物</span>
                </div>
            </div>
            <button class="refresh-button">
                <i class="fas fa-sync-alt"></i>
                <span>重新推荐</span>
            </button>
        </div>
    </div>

    <div class="bottom-nav">
        <div class="nav-item">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </div>
        <div class="nav-item">
            <i class="fas fa-map-marked-alt"></i>
            <span>地图</span>
        </div>
        <div class="nav-item">
            <i class="fas fa-dragon"></i>
            <span>精灵</span>
        </div>
        <div class="nav-item">
            <i class="fas fa-robot"></i>
            <span>导游</span>
        </div>
        <div class="nav-item active">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </div>
    </div>
</body>
</html> 